<template>
  <div class="color-num">
{{num}}
  </div>
  <button @click="add" class="color">加1</button>
  <!-- 
    1 v-model
   -->
  <!-- 法一： -->
  <!-- <child v-model="info"/> -->
  <!-- 法二： -->
  <child v-model:value="info"/>
  <!-- 
    2 v-memo
   -->
   <div>{{Newtime(time)}}</div>
</template>

<script>
import child from './child.vue'
export default {
  name: '',
  components: {
    child
  },
  data() {
    return {
       num:0,
       color:'pink',
       colorNum:'red',
       info:'',
       time:new Date()
    }
  },
  created() {},
  mounted() {
    setInterval(() => {
      this.time = new Date()
    }, 1000);
  },
  methods: {
     add(){
         this.num += 1
         this.colorNum = 'pink'
      },
      Newtime(time){
        console.log('变了');
        return time.toLocaleTimeString()
      }
  }
}
</script>

  <style lang="less" scoped>
.color{
  color:v-bind(color)
}
.color-num{
  color:v-bind(colorNum)
}
  </style>